<template>
	<view class="transaction-statistice">
		<view class="statistice-item" v-for="item,index in statisticeList" :key="index" @click="jump">
			<view class="left-icon-wrapper" :style="{'backgroundColor':item.bgColor}">
				<i class="iconfont" :class="item.icon" />
			</view>
			<view class="right-detail-wrapper">
				<view class="detail-count">
					<g-auto-zoom-text><text class="unit"
							v-show="item.isShowUnit">￥</text>{{item.value}}</g-auto-zoom-text>
				</view>
				<view class="detail-label">
					{{item.label}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, Ref, ref, reactive, computed, ComputedRef } from 'vue';
	import { useStore } from 'vuex';
	import REST_URL from '@/http/http.restUrl';
	import { IStatisticeDetail, IStatisticeList } from './types';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	
	
	const store = useStore();

	const statisticeDetail : Ref<IStatisticeDetail> = ref({
		trade: {
			today_trade: '0.00',
			last_week_trade: '0.00',
			this_month_trade: '0.00',
		},
		activate: {
			today_activate: '0',
			last_week_activate: '0',
			this_month_activate: '0',
		}
	})

	const statisticeList : ComputedRef<IStatisticeList[]> = computed(() => {
		return [
			{
				label: '今日交易（元）',
				value: statisticeDetail.value.trade.today_trade,
				isShowUnit: true,
				icon: 'icon-statistics-amount',
				bgColor: '#365fff',
			},
			{
				label: '今日激活（台）',
				value: statisticeDetail.value.activate.today_activate,
				isShowUnit: false,
				icon: 'icon-statistics-add',
				bgColor: '#a036ff',
			},
			{
				label: '上周交易（元）',
				value: statisticeDetail.value.trade.last_week_trade,
				isShowUnit: true,
				icon: 'icon-statistics-amount',
				bgColor: '#365fff',
			},
			{
				label: '上周激活（台）',
				value: statisticeDetail.value.activate.last_week_activate,
				isShowUnit: false,
				icon: 'icon-statistics-add',
				bgColor: '#a036ff',
			},
			{
				label: '本月交易（元）',
				value: statisticeDetail.value.trade.this_month_trade,
				isShowUnit: true,
				icon: 'icon-statistics-amount',
				bgColor: '#365fff',
			},
			{
				label: '本月激活（台）',
				value: statisticeDetail.value.activate.this_month_activate,
				isShowUnit: false,
				icon: 'icon-statistics-add',
				bgColor: '#a036ff',
			},
		]
	})

	onMounted(async () => {
		await uni.loginManger.$interceptor;
		await getStatisticsDetail();
	})

	const getStatisticsDetail = async () => {
		const result = await uni.http.POST(REST_URL.getStatisticsDetail, {
			customer_id: store.getters[GET_STORE_USERINFO].id
		})
		statisticeDetail.value = (result.data as IStatisticeDetail);
	}

	const jump = () => {
		uni.router.route('/pages/transaction_analysis/transactionAnalysis')
	}
</script>

<style scoped lang="scss">
	@import "./transactionStatistice.scss";
</style>